<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组常用方法</title>
    <script>
        var colors=['red','yellow','blue'];
        // 1) push(元素1,…,元素n):元素依次添加到数组的末尾,会影响原数组
        colors.push('green','pink');
        console.log(colors);
        // 2)unshift(元素1,…,元素n):元素依次添加到数组的前面,会影响原数组
        colors.unshift('gray','black');
        console.log(colors);
        // 3)pop() 方法可弹出（删除）数组最后一个元素，并返回弹出的元素。会影响原数组
        console.log(colors.pop()); 
        console.log(colors);
        // 4)shift() 方法可删除数组第一个元素，并返回删除的元素,会影响原数组
        console.log(colors.shift());
        console.log(colors);

        // 5)splice(index,count[,元素1,…,元素n]),它可以实现删除指定数量的元素、替换指定元素以及在指定位置添加元素
        // 当参数只有 index 和 count 两个参数时，如果 count 不等于 0，splice() 方法实现删除功能，同时返回所删除的元素：从 index参数指定位置开始删除 count 参数指定个数的元素；
        console.log(colors.splice(1,2));
        console.log(colors);
        // 当参数为 3 个以上，且 count 参数不为0时，splice() 方法实现替换功能，同时返回所替换的元素：用第三个及其之后的参数替换 index 参数指定位置开始的 count 参数指定个数的元素；
        console.log(colors.splice(0,2,'red','yellow'));
        console.log(colors);
        // 当参数为 3 个以上，且 count 参数为 0 时，splice() 方法的实现添加功能：用第三个及其之后的参数添加到 index 参数指定位置上。
        console.log(colors.splice(1,0,'black','blue','orange'));
        console.log(colors);

        // 6)slice(index1[,index2])slice() 方法返回包含从数组对象中的第 index1～index2-1 之间的元素的数组。
        // index2 参数可以省略，省略时表示返回从 index1 位置开始一直到最后位置的元素。需要注意的是，该方法只是读取指定的元素，并不会对原数组作任何修改。
        console.log(colors.slice(1,5));
        console.log(colors);
        // 7)sort() 方法用于按某种规则排序数组：当方法的参数为空时，按字典序（即元素的 Unicode 编码从小到大排序顺序）排序数组元素；当参数为一个匿名函数时，将按匿名函数指定的规则排序数组元素。sort() 排序后将返回排序后的数组
        colors.sort();
        console.log(colors);

        var arr=[4,3,6,2,76,1,28,19];
        arr.sort();
        console.log(arr);
        arr.sort(function(a,b){
            // return a-b;  //从小到大排序
            return b-a; //从大到小排序
        })
        console.log(arr);

        // arr.sort(function(a,b){
        //     return Math.random()-0.5;
        // })
        // console.log(arr);

        // 8） concat(数组1,…,数组n):concat() 将参数指定的数组和当前数组连成一个新数组
        var arr1=[1,2,3];
        var arr2=[4,5,6];
        var arr3=[7,8,9];
        console.log(arr1.concat(arr2,arr3));
        // ES6扩展运算符 ...
        var myarr=[...arr1,...arr2,...arr3];
        console.log(myarr);
        console.log(...arr1);
        console.log(arr1.join("-"));

        var str="www-baidu-com";
        var urlArr=str.split("-");
        console.log(urlArr);
        //9）forEach() ：方法用于对数组的每个元素执行一次回调函数。
        //forEach() 方法的第一个参数为 array 对象中每个元素需要调用的函数。
        // forEach() 方法中的各个参数说明如下：
        // currentValue 参数：必需参数，表示正在处理的数组元素（当前元素）；
        // index 参数：可选参数，表示正在处理的当前元素的索引；
        // array 参数：可选参数，表示方法正在操作的数组；
        // thisArg 参数，可选参数，取值通常为 this，为空时取值为 undefined。
        // 不改变原数组
    //    arr=arr.forEach(function(item,index){
    //         item=item*2;
    //         console.log("arr["+index+"]="+item);
    //     })
        console.log(arr);
        // 10)filter()用于创建一个新的数组，其中的元素是指定数组中所有符合指定函数要求的元素。
        var newArr=arr.filter(function(item){
            return item>10;
        })
        console.log(newArr);

        // 11)find:用于获取使回调函数值为 true 的第一个数组元素。如果没有符合条件的元素，将返回 undefined
        var newNum=arr.find(function(item){
            return item>10;
        })
        console.log(newNum);

        // 12)map() 方法用于创建一个新的数组，其中的每个元素是指定数组的对应元素调用指定函数处理后的值。
        var num=[1,2,3];
        var newnum=num.map(function(item){
            return item*item;
        })
        console.log(newnum);
        // 13)reduce() 用于使用回调函数对数组中的每个元素进行处理，并将处理进行汇总返回。
        var num2=num.reduce(function(v1,item){
            return v1+item*item;
        });
        console.log(num2);
    </script>
</head>
<body>
    
</body>
</html>